<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:th="http://www.thymeleaf.org"
   xmlns:winter="http://www.winter.org">
<body>
	<div th:fragment="cliente">
	     <winter:output id="DialogOutput">
		     <div id="DomicilioCrearDiV" th:if="${clientes.context.domicilio}">
				<winter:dialog id="@{'DomicilioDialog'}" width="80%" height="auto" title="@{'Domicilio'}" 
				               contentClass="lista-atributos" dialogClass="activar-lista-dialog">	
				   <div id="DomiciliaCrearContainer" class="form-container">
				      <winter:row>
					  	<winter:select 
							id="selectTipoDomicilio"
							field="*{domicilio.tipo}" 
							collection="tiposDom, rowTiposDom : ${clientes.tipos}" 
							value="${tiposDom.id}"
							text="@{${tiposDom.descripcion}}"
							label="@{'Tipo: '}"
							required="true"
							requiredmessage="Favor seleccione un tipo de domicilio"
							modern="true" 
							showglobalmessage="true">
						</winter:select>
						<winter:select 
							id="selectDepartamento"
							field="*{domicilio.departamento}" 
							collection="dtos, rowDtos : ${clientes.departamentos}" 
							value="${dtos.id}"
							text="@{${dtos.nombre}}"
							label="@{'Departamento: '}"
							required="true"
							requiredmessage="Favor seleccione un departamento" 
							modern="true" 
							showglobalmessage="true">
						</winter:select>
						<winter:event id="EventDepartamentos"
	                         event="change"
	                         target="selectDepartamento" url="@{'/clientes/departamentoEvent'}"
	                         form="ClientesForm"
	                         update="distritoOutput" object="clientes" immediate="true"
	                         showstatus="true" showstatuselement="true">
	                    </winter:event>
	                  </winter:row>
	                  <winter:row>
	                    <winter:output id="distritoOutput">
							<winter:select 
								id="selectDistrito"
								field="*{domicilio.distrito}" 
								collection="distr, rowDistr : ${clientes.distritos}" 
								value="${distr.id}"
								text="@{${distr.nombre}}"
								label="@{'Distrito: '}"
								modern="true"
								showglobalmessage="true">
							</winter:select>
							<winter:event id="EventDistritos"
		                         event="change"
		                         target="selectDistrito" url="@{'/clientes/distritoEvent'}"
		                         form="ClientesForm"
		                         update="barrioOutput" object="clientes" immediate="true">
		                    </winter:event>
	                    </winter:output>
					</winter:row>
					<winter:row>
					  	<winter:inputtext 
							id="NuevoClienteNumeroDom" 
							field="*{domicilio.numero}" 
							label="#{label.common.numero}"
							labeldisplay="col-xs-4"
							inputdisplay="col-xs-8"
							containerdisplay="row padded"
							class="winter-input-text capitalize"
							required="true"
							requiredimage="/images/icons/exclamation-small-red.png"
							requiredmessage="#{label.common.numero.requerido}"
							type="float" >
						</winter:inputtext>
						<winter:inputtext 
							id="NuevoClientePisoDom" 
							field="*{domicilio.piso}" 
							label="#{label.common.piso}"
							labeldisplay="col-xs-4"
							inputdisplay="col-xs-8"
							containerdisplay="row padded"
							class="winter-input-text capitalize"
							required="true"
							requiredimage="/images/icons/exclamation-small-red.png"
							requiredmessage="#{label.common.piso.requerido}"
							type="float" >
						</winter:inputtext>
						<winter:inputtext 
							id="NuevoClienteUnidadDom" 
							field="*{domicilio.unidad}" 
							label="#{label.common.unidad}"
							labeldisplay="col-xs-4"
							inputdisplay="col-xs-8"
							containerdisplay="row padded"
							class="winter-input-text capitalize"
							required="true"
							requiredimage="/images/icons/exclamation-small-red.png"
							requiredmessage="#{label.common.unidad.requerido}"
							type="float" >
						</winter:inputtext>
					</winter:row>
					<winter:row>	                                    
						<winter:textarea 
							id="NuevoClienteCallePrincipal" 
							field="*{domicilio.callePrincipal}"
							label="#{label.common.calle.principal}"
							labeldisplay="col-xs-4"
							inputdisplay="col-xs-8"
							containerdisplay="row padded"
							class="winter-input-text capitalize"
							required="true"
							requiredimage="/images/icons/exclamation-small-red.png"
							requiredmessage="#{label.common.calle.principal.requerido}">
						</winter:textarea>
						<winter:textarea 
							id="NuevoClienteDomicilio" 
							field="*{domicilio.calleAlternativa}"
							label="#{label.common.calle.alternativa}"
							labeldisplay="col-xs-4"
							inputdisplay="col-xs-8"
							containerdisplay="row padded"
							class="winter-input-text capitalize"
							required="true"
							requiredimage="/images/icons/exclamation-small-red.png"
							requiredmessage="#{label.common.calle.alternativa.requerido}">
						</winter:textarea>
					</winter:row>
					<winter:row class="button-panel-right" padded="true">
						<winter:ajaxSubmit 
							id="CrearDomicilio" 
							form="ClientesForm" 
							url="@{'/clientes/guardarDomicilio'}" 
							update="DialogOutput, CrearEditarClienteOutput"
							object="clientes"
							value="#{label.operaciones.guardar}"
							showstatus="true"
							class="btn btn-cyan"
							confirmationrequired="true"
							confirmationtext="Está seguro que desea realizar la operación?"
							process="DomiciliaCrearContainer"
							oncomplete="@{'Winter.ui.CloseDialog(\'DomicilioDialog\')'}">
						</winter:ajaxSubmit>
						<winter:ajaxSubmit 
							id="CrearDomicilioCancelar" 
							form="ClientesForm"
							object="clientes"
							url="@{'/clientes/cancelar/DOMICILIO'}"
							update="DialogOutput, CrearEditarClienteOutput"
							value="#{label.operaciones.cancelar}"
							showstatus="true"
							class="btn btn-danger"
							process="DomiciliaCrearContainer"
							immediate="true"
							oncomplete="@{'Winter.ui.CloseDialog(\'DomicilioDialog\')'}"> 
						</winter:ajaxSubmit>
					</winter:row>										                  		   
				   </div>     
		        </winter:dialog>
		     </div>
		     
		     <div id="TelefonoCrearDiV" th:if="${clientes.context.telefono}">
				<winter:dialog id="@{'TelefonoDialog'}" width="80%" height="auto" title="@{'Telefono'}" 
				               contentClass="lista-atributos" dialogClass="activar-lista-dialog">	
				   <div id="TelefonoCrearContainer" class="form-container">
				      <winter:row>
					  	<winter:select 
							id="selectTipoTelefono"
							field="*{telefono.tipo}" 
							collection="tiposTel, rowTiposTel : ${clientes.tipos}" 
							value="${tiposTel.id}"
							text="@{${tiposTel.descripcion}}"
							label="@{'Tipo: '}"
							required="true"
							requiredimage="/images/icons/exclamation-small-red.png"
							requiredmessage="Favor seleccione un tipo de telefono"
							modern="true" 
							showglobalmessage="true">
						</winter:select>
						<winter:inputtext 
							id="NuevoClienteTelefono" 
							field="*{telefono.numero}" 
							label="#{label.common.numerotel}"
							labeldisplay="col-xs-4"
							inputdisplay="col-xs-8"
							containerdisplay="row padded"
							class="winter-input-text capitalize"
							required="true"
							requiredimage="/images/icons/exclamation-small-red.png"
							requiredmessage="#{label.common.numerotel.requerido}"
							type="float" >
						</winter:inputtext>
					</winter:row>
					<winter:row class="button-panel-right" padded="true">
						<winter:ajaxSubmit 
							id="CrearTelefono" 
							form="ClientesForm" 
							url="@{'/clientes/guardarTelefono'}" 
							update="DialogOutput, CrearEditarClienteOutput"
							object="clientes"
							value="#{label.operaciones.guardar}"
							showstatus="true"
							class="btn btn-cyan"
							confirmationrequired="true"
							confirmationtext="Está seguro que desea realizar la operación?"
							process="TelefonoCrearContainer"
							oncomplete="@{'Winter.ui.CloseDialog(\'TelefonoDialog\')'}">
						</winter:ajaxSubmit>
						<winter:ajaxSubmit 
							id="CrearTelefonoCancelar" 
							form="ClientesForm"
							object="clientes"
							url="@{'/clientes/cancelar/TELEFONO'}"
							update="DialogOutput, CrearEditarClienteOutput"
							value="#{label.operaciones.cancelar}"
							showstatus="true"
							class="btn btn-danger"
							process="TelefonoCrearContainer"
							immediate="true"
							oncomplete="@{'Winter.ui.CloseDialog(\'TelfonoDialog\')'}"> 
						</winter:ajaxSubmit>
					</winter:row>											                  		   
				   </div>     
		        </winter:dialog>
		     </div>	     	    

	     </winter:output>
		<winter:output id="CrearEditarClienteOutput">
<!-- 			<div id="NuevoClienteContainer" class="form-container" th:if="${clientes.context.cliente}"> -->
			<div id="BarraNuevoCliente" class="headerbar" th:if="${clientes.context.cliente}">
				<div class="form-title" th:text="@{'Cliente'}">Cliente</div>
			   	<winter:row>
					<winter:inputtext
						id="NuevoClienteNombre" 
						field="*{cliente.persona.nombresRazon}" 
						label="#{label.persona.nombres}"
						labeldisplay="col-xs-4"
						inputdisplay="col-xs-8"
						containerdisplay="row padded"
						class="winter-input-text"
						required="true"
						requiredimage="/images/icons/exclamation-small-red.png"
						requiredmessage="#{label.persona.nombres.requerido}">
					</winter:inputtext>
					<winter:inputtext
						id="NuevoClienteApellido" 
						field="*{cliente.persona.apellidos}" 
						label="#{label.persona.apellidos}"
						labeldisplay="col-xs-4"
						inputdisplay="col-xs-8"
						containerdisplay="row padded"
						class="winter-input-text"
						required="true"
						requiredimage="/images/icons/exclamation-small-red.png"
						requiredmessage="#{label.persona.apellidos.requerido}">
					</winter:inputtext>
					<winter:datetimepicker
						id="FechaNac"
						label="#{label.persona.fechanac}"
						field="*{cliente.persona.fechaNacimientoCreacion}"
						format="DD/MM/YYYY">
					</winter:datetimepicker>
				</winter:row>
				<winter:row>
					<winter:select 
						id="selectPais"
						field="*{pais}" 
						collection="pais, rowPais : ${clientes.paises}" 
						value="${pais.codigo}"
						text="@{${pais.descripcion}}"
						label="#{label.persona.pais}"
						required="true"
						requiredmessage="#{label.persona.pais.requerido}"
						modern="true"
						showglobalmessage="true">
					</winter:select>
					<winter:select 
						id="selectSexo"
						field="*{sexo}" 
						collection="sexo, rowSexo : ${clientes.generos}" 
						value="${sexo.codigo}"
						text="@{${sexo.descripcion}}"
						label="#{label.persona.sexo}"
						required="true"
						requiredmessage="#{label.persona.sexo.requerido}"
						modern="true"
						showglobalmessage="true">
					</winter:select>
					<winter:select 
						id="selectEstadoCivil"
						field="*{estadoCivil}" 
						collection="est, rowEst : ${clientes.estadosCiviles}" 
						value="${est.codigo}"
						text="@{${est.descripcion}}"
						label="#{label.persona.estadocivil}"
						required="true"
						requiredmessage="#{label.persona.estadocivil.requerido}"
						modern="true"
						showglobalmessage="true">
					</winter:select>
				</winter:row>
				<winter:row>						
					<winter:inputtext 
						id="NuevoClienteNupcia" 
						field="*{cliente.persona.nupcia}"
						label="#{label.persona.nupcia}"
						labeldisplay="col-xs-4"
						inputdisplay="col-xs-8"
						containerdisplay="row padded"
						class="winter-input-text">
					</winter:inputtext>
					<winter:inputtext 
						id="NuevoClienteProfesion" 
						field="*{cliente.persona.profesionActividad}" 
						label="#{label.persona.profesion}"
						labeldisplay="col-xs-4"
						inputdisplay="col-xs-8"
						containerdisplay="row padded"
						class="winter-input-text"
						required="true"
						requiredimage="/images/icons/exclamation-small-red.png"
						requiredmessage="#{label.persona.profesion.requerido}">
					</winter:inputtext>
					<winter:inputtext 
						id="NuevoClienteEmail" 
						field="*{cliente.persona.email}"
						label="#{label.persona.email}"
						labeldisplay="col-xs-4"
						inputdisplay="col-xs-8"
						containerdisplay="row padded"
						class="winter-input-text"
						required="true"
						requiredimage="/images/icons/exclamation-small-red.png"
						requiredmessage="#{label.persona.email.requerido}">
					</winter:inputtext>			    
				</winter:row>
				<winter:row>
					<winter:check
						id="nuevoClienteActivo" 
						field="*{cliente.persona.activo}"
						label="#{label.common.activo}"
						labeldisplay="col-xs-4"
						inputdisplay="col-xs-8">
					</winter:check>							
					<winter:check
						id="nuevoClienteEscribano" 
						field="*{cliente.persona.escribano}"
						label="#{label.persona.escribano}"
						labeldisplay="col-xs-4"
						inputdisplay="col-xs-8">
					</winter:check>
					<winter:inputtext 
						id="NuevoClienteRegistro" 
						field="*{cliente.persona.registroNro}" 
						label="#{label.persona.nroregistro}"
						labeldisplay="col-xs-4"
						inputdisplay="col-xs-8"
						containerdisplay="row padded"
						class="winter-input-text"
						required="true"
						requiredimage="/images/icons/exclamation-small-red.png"
						requiredmessage="#{label.persona.nroregistro.requerido}">
					</winter:inputtext>		    
				</winter:row>
			</div>
			<div id="NuevoClienteInfoContainer" class="form-container" th:if="${clientes.context.cliente}">
				<winter:output id="PersonaInfoOutput">
					<winter:tabs id="PersonaInfoTabs">
						<winter:tab-item id="panelDireccion" header="Direccion" >
						   <winter:row>
								<winter:ajaxlink 
									id="@{'AgregarDireccion'}"
									form="ClientesForm"
									url="@{'/clientes/addDireccion'}" 
									update="DialogOutput"
									title="Agregar Direccion"
									tip="true"
									image="/images/icons/commons/button_add.png"
									object="clientes"
									oncomplete="@{'Winter.ui.OpenDialog(\'DomicilioDialog\')'}"
									immediate="true">
								</winter:ajaxlink>						    
							</winter:row>						
							<winter:datatable 
								id="listaDirecciones"
								customLanguage="true"
								paginate="true"
								jQuery="true"
								retrieve="true"
								emptyTableText="No se encontraron Datos!"
								infoText="Mostrando _START_ al _END_ de _TOTAL_ registros"
								emptyTableInfoText="Mostrando 0 al 0 de 0 registros"
								searchText="Buscar"
								lengthMenu="Mostrar _MENU_ registros"
								if="${!#lists.isEmpty(clientes.cliente.domicilios)}">
								<thead>
									<tr>
										<th th:text="@{'Tipo'}"></th>
										<th th:text="@{'Numero'}"></th>
										<th th:text="@{'Piso'}"></th>
										<th th:text="@{'Unidad'}"></th>
										<th th:text="@{'Calle Alternativa'}"></th>
										<th th:text="@{'Calle Principal'}"></th>
										<th th:text="@{'Departamento'}"></th>
										<th th:text="@{'Distrito'}"></th>
										<th th:text="@{'Principal?'}"></th>
										<th th:text="@{'Activo?'}"></th>
										<th th:text="@{'Operaciones'}"></th>
									</tr>
								</thead>
								<tbody>
									<tr th:each="dire, dirRowStat : ${clientes.cliente.domicilios}">
										<td th:text="${dire.tipo.descripcion}"></td>
										<td th:text="${dire.numero}"></td>
										<td th:text="${dire.piso}"></td>
										<td th:text="${dire.unidad}"></td>
										<td th:text="${dire.calleAlternativa}"></td>
										<td th:text="${dire.callePrincipal}"></td>
										<td th:text="${dire.departamento.nombre}"></td>
										<td th:text="${dire.distrito.nombre}"></td>
										<td th:text="${clientes.descEstado(dire.principal)}"></td>
										<td th:text="${clientes.descEstado(dire.activo)}"></td>
										<td>										
											<winter:ajaxlink 
												id="@{'EditarDir'+${dirRowStat.index}}"
												form="ClientesForm" 
												url="@{'/clientes/editarDomicilio/'+${dirRowStat.index}}"
												update="PersonaInfoOutput, DialogOutput"
												title="Editar"
												object="clientes"
												immediate="true"
												tip="true"
												class="ajax-submit icon-edit-sign icon-2x"
												oncomplete="@{'Winter.ui.OpenDialog(\'DomicilioDialog\')'}"
												showstatus="true">
											</winter:ajaxlink>
											<winter:ajaxlink 
												id="@{'EliminarDir'+${dirRowStat.index}}"
												form="ClientesForm"
												url="@{'/clientes/deleteDomicilio/'+${dirRowStat.index}}" 
												update="PersonaInfoOutput"
												title="Eliminar"
												tip="true"
												object="clientes"
												effect="fade"
												immediate="true"
												showstatus="true"
												confirmationrequired="true"
												confirmationtext="Está seguro que desea realizar la operación?"												
												class="ajax-submit icon-remove-sign icon-2x">
											</winter:ajaxlink>										
										</td>
									</tr>
								</tbody>
							</winter:datatable>
						</winter:tab-item>
						<winter:tab-item id="panelTelefono" header="Telefonos"  >
						   <winter:row>
								<winter:ajaxlink 
									id="@{'AgregarTelefono'}"
									form="ClientesForm"
									url="@{'/clientes/addTelefono'}" 
									update="DialogOutput"
									title="Agregar Telefono"
									tip="true"
									image="/images/icons/commons/button_add.png"
									object="clientes"
									oncomplete="@{'Winter.ui.OpenDialog(\'TelefonoDialog\')'}"
									immediate="true">
								</winter:ajaxlink>						    
							</winter:row>
							<winter:datatable 
								id="listaTelefonos"
								customLanguage="true"
								paginate="true"
								jQuery="true"
								retrieve="true"
								emptyTableText="No se encontraron Datos!"
								infoText="Mostrando _START_ al _END_ de _TOTAL_ registros"
								emptyTableInfoText="Mostrando 0 al 0 de 0 registros"
								searchText="Buscar"
								lengthMenu="Mostrar _MENU_ registros"
								if="${!#lists.isEmpty(clientes.cliente.telefonos)}">
								<thead>
									<tr>
										<th th:text="@{'Tipo'}"></th>
										<th th:text="@{'Numero'}"></th>
										<th th:text="@{'Operaciones'}"></th>
									</tr>
								</thead>
								<tbody>
									<tr th:each="telef, telefRowStat : ${clientes.cliente.telefonos}">
										<td th:text="${telef.tipo.descripcion}"></td>
										<td th:text="${telef.numero}"></td>
										<td>										
											<winter:ajaxlink 
												id="@{'EditarTelef'+${telefRowStat.index}}"
												form="ClientesForm" 
												url="@{'/clientes/editarTelefono/'+${telefRowStat.index}}"
												update="PersonaInfoOutput, DialogOutput"
												title="Editar"
												object="clientes"
												immediate="true"
												tip="true"
												class="ajax-submit icon-edit-sign icon-2x"
												oncomplete="@{'Winter.ui.OpenDialog(\'TelefonoDialog\')'}"
												showstatus="true">
											</winter:ajaxlink>
											<winter:ajaxlink 
												id="@{'EliminarTelef'+${telefRowStat.index}}"
												form="ClientesForm"
												url="@{'/clientes/deleteTelefono/'+${telefRowStat.index}}" 
												update="PersonaInfoOutput"
												title="Eliminar"
												tip="true"
												object="clientes"
												effect="fade"
												immediate="true"
												showstatus="true"
												confirmationrequired="true"
												confirmationtext="Está seguro que desea realizar la operación?"												
												class="ajax-submit icon-remove-sign icon-2x">
											</winter:ajaxlink>										
										</td>
									</tr>
								</tbody>
							</winter:datatable>
						</winter:tab-item>
				</winter:output>													
				<winter:row class="button-panel-right" padded="true">
						<winter:ajaxSubmit 
							id="CrearCliente" 
							form="ClientesForm" 
							url="@{'/clientes/guardarCliente'}" 
							update="ClientesOutput, CrearEditarClienteOutput"
							object="clientes"
							value="#{label.operaciones.guardar}"
							showstatus="true"
							class="btn btn-cyan"
							confirmationrequired="true"
							confirmationtext="Está seguro que desea realizar la operación?"
							process="NuevoClienteContainer">
						</winter:ajaxSubmit>
						<winter:ajaxSubmit 
							id="CrearClienteCancelar" 
							form="ClientesForm" 
							url="@{'/clientes/cancelar/CLIENTES'}"
							update="ClientesOutput"
							value="#{label.operaciones.cancelar}"
							showstatus="true"
							class="btn btn-danger"
							process="NuevoClienteContainer"
							immediate="true">
						</winter:ajaxSubmit>
				</winter:row>
			</div>		
		</winter:output>
	</div>
	
</body>
</html>